<template>
    <div>
        <el-dialog
            :visible.sync="dialogVisible"
            :width="width"
            title="配置"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            v-dialogDrag
            class="dialog-main"
            :modal='false'
            >
            <div class="main-flex">
                <div class="flex-c">
                    <el-tag
                        v-for="(tag,index) in tagsList"
                        :key="tag.name + tag.id"
                        closable
                        size="mini"
                        style="margin-right:5px;margin-bottom:5px;"
                        @close="handleClose(index)"
                        >
                        {{tag.name}}
                    </el-tag>
                </div>
                <div class="w-60">
                    <el-input 
                        v-model="putSearch"
                        size='mini'
                        class="input-with-select"
                        clearable
                        @change="searchSomething"
                        style="width:86%;margin-bottom:10px"
                        @keyup.enter.native="searchSomething"
                        placeholder="id/名称"
                    ></el-input>
                    <el-button type="primary" size="mini"  @click="searchSomething">{{M2('搜索')}}</el-button>
                    <commonTable @getSelectionChange="getSelectionChange"  :tableData="computedTableData" :tableList="tableList"></commonTable>
                    <el-pagination
                        class="page-box"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[50, 100, 200, 500]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="successDing()" size="mini" type="primary">确 定</el-button>
                <el-button @click="closeCommonDialog()" size="mini">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getDingChatDefByPage,getListEmployeeByPage,getListRoleByPage } from '@/api/user.js'
import commonTable from '@/components/common/commonTable'
export default {
     components:{
       commonTable
    },
    data(){
        return {
            dialogVisible: false,
            tagsList:[],
            putSearch:null,
            tableData:[],
            tableList:[],
            idList:[],
            total:0,
            currentPage4:0,
            pageSize:50,
            pageNum:1,
            val:null,
        }
    },
    props:{
        titleText:{
            type:String,
            default:() => ('')
        },
        multiple:{
            type:Boolean,
            default:() => (false)
        },
        width:{
            type:String,
            default:() => ('1200px')
        },
    },
    computed:{
        computedTableData(){
            if(this.tagsList && this.tagsList.length > 0){
                let idList = []
                if(this.val == 1) {
                    idList =  this.tagsList.map(item => Number(item.id))
                }else {
                    idList = this.tagsList.map(item => item.id)
                }
                
                let tableData = this.tableData.filter(item => {
                    return !idList.includes(item.id)
                })
                return tableData
            }else {
                return this.tableData
            } 
        }
    },
    mounted(){
    },
    methods:{
        handleClose(i){
            this.tagsList.splice(i,1)
        },
        handleSizeChange(val) {
            this.pageSize = val
            if(this.val ==1 || this.val == 4 || this.val == 5 || this.val == 6){
                this.getListEmployeeByPageFn()
            }else if(val == 2){
                this.getDingChatDefByPageFn()
            }else if(val == 3){
                this.getRoleListPageFn()
            }
        },
        handleCurrentChange(val) {
            this.pageNum = val
            if(this.val ==1 || this.val == 4 || this.val == 5 || this.val == 6){
                this.getListEmployeeByPageFn()
            }else if(val == 2){
                this.getDingChatDefByPageFn()
            }else if(val == 3){
                this.getRoleListPageFn()
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        getSelectionChange(val){
            if(val && val.length > 0){
                let idList = val.map(item => {
                    return {
                        id:item.id,
                        name:item.name
                    }
                })
                let ids = val.map(item => {
                    return item.id
                })
                if(this.tagsList && this.tagsList.length > 0){
                    idList.forEach(item1 => {
                        if(!ids.includes(item1)){
                            this.tagsList.push(item1)
                        }
                    })
                }else {
                    this.tagsList = idList
                }
            }
        },
        searchSomething(){
            this.pageNum = 1
            this.pageSize = 50
            if(this.val ==1 || this.val == 4 || this.val == 5 || this.val == 6){
                this.getListEmployeeByPageFn()
            }else if(this.val ==2){
                this.getDingChatDefByPageFn()
            }else if(this.val ==3){
                this.getRoleListPageFn()
            }
        },
        getRoleListPageFn(){
            let param = {
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                roleSearch:this.putSearch,
            }
            getListRoleByPage(param).then(res => {
                this.tableData = res.data.rows
                this.total = res.data.records;
                this.currentPage4 = res.data && res.data.pageNum ? res.data.pageNum : 1
            })
        },
        getDingChatDefByPageFn(){
            let param = {
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                search:this.putSearch,
            }
            getDingChatDefByPage(param).then(res => {
                res.data.rows.forEach(item => {
                    if(!item.name){
                        item.name =  item.id
                    }
                })
                this.tableData = res.data.rows
                this.total = res.data.records;
                this.currentPage4 = res.data && res.data.pageNum ? res.data.pageNum : 1
            })
        },
        getListEmployeeByPageFn(){
             let params = {
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                empSearch:this.putSearch
            }
            getListEmployeeByPage(params).then(res => {
                res.data.rows.forEach(item => {
                    item.name = item.TrueName
                    item.id = item.Id
                })
                this.tableData = res.data.rows
                this.total = res.data.records;
                this.currentPage4 = res.data && res.data.pageNum ? res.data.pageNum : 1
            })
        },
        successDing(){
            if(this.multiple){
                if(this.tagsList && this.tagsList.length > 1){
                    this.$message({
                        showClose: true,
                        message:'只能选择一条数据！',
                        offset:220,
                        duration: 2000,
                        type: 'error'
                    })
                    return
                }
            }
            this.$emit('getSelectMulList',this.tagsList,this.val)
            this.closeCommonDialog()
        },
        openCommonDialog(row,val){
            this.dialogVisible = true
            this.total = 0
            this.currentPage4 = 0
            this.pageSize = 50
            this.pageNum = 1
            this.val = val
            this.putSearch = null
            if(row && row.length > 0){
                this.tagsList = JSON.parse(JSON.stringify(row))
            }else {
                this.tagsList = []
            }
            // if(idList && idList.length > 0){
            //     this.idList = JSON.parse(JSON.stringify(idList))
            // }else {
            //     this.idList = []
            // }
            if(val ==1 || val == 4 || val == 5 || this.val == 6){
                this.getListEmployeeByPageFn()
            }else if(val == 2){
                this.getDingChatDefByPageFn()
            }else if(val == 3){
                this.getRoleListPageFn()
            }
            this.tableList = [
                {
                    key:1,
                    propName:'id',
                    labelName:'ID',
                    showToolTip:false,
                },
                {
                    key:2,
                    propName:'name',
                    labelName:'名称',
                    showToolTip:false,
                },
            ]
        },
        closeCommonDialog(){
            this.dialogVisible = false
        }
    }
}
</script>
<style scoped lang="scss">
::v-deep.dialog-main{
    .el-dialog__header{
        border-bottom: 1px solid #ccc;
        padding: 10px !important;
        .el-dialog__title{
            font-weight: bold;
        }
    }
    .el-dialog__body{
        padding: 10px 20px 20px !important;
        overflow-y: auto;
        .main-flex {
            display: flex;
            .flex-c {
                max-height:100%;overflow-y:auto;width:40%;
                margin-right: 20px;
                border-right: 1px solid #ccc;
            }
        }
        .page-box {
            display: flex;
            margin-top: 10px;
            justify-content: flex-end;
        }
    }
    .w-60{ 
        width: 60%;
    }
}
</style>